<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3881262_oocd9mwp5l.css">

    <style>
        .container {
            width: 600px;
            position: relative;
        }

        span {
            font-size: 50px !important;
            position: absolute;
        }

        .left {
            left: 0;
            top: 50%;
            transform: translateY(-50%) rotate(-180deg);

        }

        .right {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        ul {
            list-style: none;
            display: flex;
            position: absolute;
            left: 180px;
            bottom: 0;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
        }

        li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, .5);
        }

        .bgColor {
            background-color: rgba(32, 159, 168, 0.5);
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="./../img/pug1.jpg" alt="" id="img">
        <span class="iconfont icon-arrow-right left"></span>
        <span class="iconfont icon-arrow-right right"></span>
        <ul>
            <li class="bgColor">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script>

        //1.自动切换
        //2.鼠标移入图片暂停，移出继续轮播
        //3.左右两个按钮，点击可以切换上一张或下一张
        //4.下面的四个小圆点会随图片变颜色
        //5.小圆点可以点击展示对应的图片

        let img = document.getElementById('img');
        let container = document.getElementsByClassName('container')[0];
        let span = document.getElementsByTagName('span');
        let li = document.getElementsByTagName('li');
        let imgArr = ['pug1.jpg', 'pug2.jpg', 'pug3.jpg', 'pug4.jpg']
        let i = 0, lastIndex = 0;

        //自动切换
        function change() {
            lastIndex = i;
            i++;
            if (i > imgArr.length - 1) {
                i = 0;
            }
            img.src = `./../img/${imgArr[i]}`
            changeCircle()//圆点颜色切换的方法
        }
        let id = setInterval(change, 500);

        //鼠标移入暂停，移出继续
        container.addEventListener('mouseenter', function () {
            clearInterval(id);
        })
        container.addEventListener('mouseleave', function () {
            id = setInterval(change, 500);
        })

        //左右两个按钮，点击可以切换上一张或下一张
        span[0].onclick = function () {
            if (i == 0) {
                i = imgArr.length - 1;
            } else {
                i--;
            }
            img.src = `./../img/${imgArr[i]}`
            changeCircle();
        }

        span[1].onclick = function () {
            change()
        }

        // 下面的四个小圆点会随图片变颜色
        function changeCircle() {
            //方法1
            // li[lastIndex].className = '';
            // li[i].classList.add('bgColor');
            //方法2
            for (let index = 0; index < li.length; index++) {
                li[index].classList.remove('bgColor');
            }
            li[i].classList.add('bgColor')
        }

        //点击切换圆点
        for(let index in li){
            li[index].onclick=function(){
                li[index].classList.add('bgColor')
                i=index-1;//因为change函数当中先会i++，所以这里需要先减1
                change()
            }

        }


    </script>

</body>

</html>